<template>
	<view>
		<qiun-title-bar title="博客类别比例"></qiun-title-bar>
		<view class="charts-box">
			<qiun-data-charts type="pie" :chartData="CategorychartData" />
		</view>
		<qiun-title-bar title="最新博客分析"></qiun-title-bar>
		<view class="charts-box">
			<qiun-data-charts type="column" :opts="Blogopts" :chartData="BlogChartData" :ontouch="true" />
		</view>
		<qiun-title-bar title="常用标签词云"></qiun-title-bar>
		<view class="charts-box">
			<qiun-data-charts type="word" :opts="Tagsopts" :chartData="tagChartData" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CategorychartData: {},
				BlogChartData: {},
				tagChartData: {},
				Categoryopts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				Blogopts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4,

					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				Tagsopts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					enableScroll: false,
					extra: {
						word: {
							type: "normal",
							autoColors: false
						}
					}
				}
			};
		},
		onPullDownRefresh() {
			this.getBlog()
			this.getCategory()
			this.getTags()
			uni.stopPullDownRefresh()
		},
		onLoad() {
			// let tags = uni.getStorageSync(this.$params.cache_charts_tags);
			// let blog = uni.getStorageSync(this.$params.cache_charts_blog);
			// let category = uni.getStorageSync(this.$params.cache_charts_category);

			this.getCategory();
			this.getBlog()
			this.getTags()

		},
		methods: {
			getCategory() {
				this.$request.get(this.$params.host + "api/v1/categories/", async (res) => {
					console.log(res);
					let resdata = {
						series: [{
							data: []
						}]
					};
					for (let c of res.data) {
						let r = await this.$request.requestAsync(
							this.$params.host + "api/v1/blogs/category/count/" + c.id
						);
						if (r.statusCode == 200) {
							resdata.series[0].data.push({
								name: c.name,
								value: r.data.data,
							});
						}
					}

					this.CategorychartData = resdata;
					// uni.setStorageSync(this.$params.cache_charts_category, this.CategorychartData);
				});
			},
			getBlog() {
				this.$request.get(this.$params.host + "api/v1/blogs/", res => {
					let temp = {
						categories: [],
						series: [{
								name: "阅读量",
								data: [],
							},
							{
								name: "评论数",
								data: [],
							}
						],
					};
					res.data.forEach(blog => {
						temp.categories.push(blog.title.substring(0, 5) + "...");
						temp.series[0].data.push(blog.readCount);
						temp.series[1].data.push(blog.comments.length);
					})
					this.BlogChartData = temp;
					// uni.setStorageSync(this.$params.cache_charts_blog, this.BlogChartData);
				}, () => {});
			},
			getTags() {
				this.$request.get(this.$params.host + "api/v1/tags/", async (res) => {
					console.log();
					let tags = {
						series: [],
					}

					for (const c of res.data) {
						try {
							let res2 = await this.$request.requestAsync(this.$params.host + "api/v1/tags/" + c
								.id + "/blogs");
							if (res2.data.success) {
								let temp = {
									name: c.name,
									textSize: res2.data.data.length * 10
								}
								tags.series.push(temp);
							}
						} catch (err) {}
					}
					this.tagChartData = tags;
					// uni.setStorageSync(this.$params.cache_charts_tags, this.tagChartData);
				})
			},

		}
	};
</script>

<style>
	.charts-box .charts-header {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 32px;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 16px;
	}
</style>